<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
	<style type="text/css">
		.con,.con2{
			width: 300px;
			border: 1px solid #000;
			margin: 100px auto 0;
			font-size: 0;
		}

		.con a{
			width: 50px;
			height: 50px;
			background-color: gold;
			display: inline-block;
			font-size: 16px;
			margin: 10px;
			text-align: center;
			line-height: 50px;
			text-decoration: none;
		}
		
		/*解决办法1:清除浮动,在父级上增加overflow元素*/
		/*.con2{
			overflow: hidden;
		}*/

		.clearfix:before,.clearfix:after{
			content:"";
			display: table;
		}
		.clearfix:after{
			clear: both;
		}
		.con2 a{
			width: 50px;
			height: 50px;
			background-color: gold;
			display: inline-block;
			font-size: 16px;
			margin: 10px;
			text-align: center;
			line-height: 50px;
			text-decoration: none;
			float: left;
		}

		.con3{
			width: 300px;
			border: 1px solid #000;
			margin: 100px auto 0;
		}
		.con3 span{
			background-color: gold;
			float: left;
		}
	</style>
</head>
<body>
	<div class="con">
		<a href="">1</a>
		<a href="">2</a>
		<a href="">3</a>
		<a href="">4</a>
		<a href="">5</a>
		<a href="">6</a>
		<a href="">7</a>
		<a href="">8</a>
		<a href="">5</a>
		<a href="">6</a>
		<a href="">7</a>
		<a href="">8</a>
	</div>

	<div class="con2 clearfix">
		<a href="">1</a>
		<a href="">2</a>
		<a href="">3</a>
		<a href="">4</a>
		<a href="">5</a>
		<a href="">6</a>
		<a href="">7</a>
		<a href="">8</a>
		<a href="">5</a>
		<a href="">6</a>
		<a href="">7</a>
		<a href="">8</a>

		<!-- 清除浮动解决办法2,在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐） -->
		<!-- <div style="clear: both"></div> -->
	</div>

	<!-- 元素经过浮动可以转换为行内块元素,但是与行内块元素有区别,首先不会因为代码换行产生间距,它有浮动的特性 -->
	<div class="con3 clearfix">
		<span>span元素</span>
		<span>span元素</span>
		<span>span元素</span>
		<span>span元素</span>
		<span>span元素</span>
		<span>span元素</span>
	</div>
</body>
</html>